<template>
  <div>
    <div class="member-box">
      <div @click="zhuxiao" class="zhuxiao">注销</div>
      <van-nav-bar title="会员中心"/>
      <div @click="zhuceanddengru" class="zhuceanddengru">注册/登入</div>

    </div>
    <div class="top">
      <div class="shangchuan">上传头像</div>
      <van-uploader :after-read="onRead" multiple>
        <van-icon class="icon" name="photograph"/>
      </van-uploader>
    </div>
    <div>
      <van-cell-group>
        <van-cell title="会员卡" is-link/>
        <van-cell title="地址管理" is-link/>
        <van-cell title="我的订单" is-link/>
        <van-cell title="会员权益" is-link/>
        <van-cell title="联系我们" is-link/>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  created() {},
  methods: {
    zhuxiao() {
      if (localStorage.userInfo) {
        localStorage.removeItem("userInfo");
        Toast.success('注销成功')
      }
    },
    zhuceanddengru(){
      this.$router.push({name:'rukou'})
    }
  }
};
</script>

<style lang="stylus" scoped>
.member-box {
  position: relative;

  .zhuxiao {
    position: absolute;
    left: 3rem;
    top: 1rem;
    z-index: 2000;
    font-size: 12px;
    color: red;
  }
  .zhuceanddengru{
    position: absolute;
    top 1rem
    right 3rem
    z-index: 2000;
    font-size: 12px;
    color: red;
  }
}

.top {
  height: 5rem;
  text-align: center;
  padding-top: 2rem;
  background-color: #eea2ad;
  font-size: 40px;

  .shangchuan {
    font-size: 14px;
    margin-bottom: 5px;
  }
}

.icon {
  width: 50px;
  height: 50px;
}
</style>